<?php
/**
 * 5-6岁专区内容
 */

if (!defined('ROOT_PATH')) {
    die('直接访问被禁止');
}

// 设置页面标题
set_page_title('5-6岁专区');

// 页面特定样式
$page_styles = <<<HTML
<style>
    /* 5-6岁专区特定样式 */
    body {
        background-color: #f0f8ff;
        font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    }
    
    .navbar {
        background: linear-gradient(to right, #64b5f6, #42a5f5);
        border-radius: 0 0 20px 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .navbar-brand {
        font-size: 1.8rem;
        font-weight: bold;
        color: #fff !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
    
    .nav-link {
        font-size: 1.1rem;
        margin: 0 5px;
        color: rgba(255, 255, 255, 0.9) !important;
        transition: all 0.3s;
        position: relative;
        padding: 8px 15px;
        font-weight: 600;
    }
    
    .nav-link:hover, .nav-link.active {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }
    
    .welcome-container {
        background-color: #fff;
        border-radius: 25px;
        padding: 40px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
        border: 8px solid #bbdefb;
        text-align: center;
        background: linear-gradient(135deg, #FFFFFF 60%, #e3f2fd 100%);
    }
    
    .welcome-title {
        color: #1976d2;
        font-size: 2.8rem;
        font-weight: bold;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }
    
    .welcome-description {
        color: #666;
        font-size: 1.2rem;
        margin-bottom: 30px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .section-container {
        background-color: #fff;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
        border: 6px solid;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        position: relative;
    }
    
    .section-container:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }
    
    .math-section {
        border-color: #bbdefb;
        background: linear-gradient(135deg, #FFFFFF 70%, #e3f2fd 100%);
    }
    
    .logic-section {
        border-color: #c8e6c9;
        background: linear-gradient(135deg, #FFFFFF 70%, #e8f5e9 100%);
    }
    
    .section-title {
        color: #444;
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 3px dashed rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .math-section .section-title {
        color: #1976d2;
    }
    
    .logic-section .section-title {
        color: #388e3c;
    }
    
    .section-description {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 25px;
        text-align: center;
    }
    
    .section-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
        border-radius: 15px;
        margin-bottom: 25px;
        border: 4px solid rgba(255,255,255,0.7);
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }
    
    .features-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .feature-item {
        background-color: rgba(255,255,255,0.7);
        border-radius: 15px;
        padding: 15px;
        display: flex;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }
    
    .feature-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }
    
    .feature-icon {
        font-size: 2rem;
        margin-right: 15px;
        color: #1976d2;
    }
    
    .math-section .feature-icon {
        color: #1976d2;
    }
    
    .logic-section .feature-icon {
        color: #388e3c;
    }
    
    .section-btn {
        display: inline-block;
        padding: 12px 30px;
        border-radius: 50px;
        font-weight: bold;
        font-size: 1.1rem;
        transition: all 0.3s ease;
        text-decoration: none;
        color: white;
    }
    
    .math-btn {
        background-color: #1976d2;
        box-shadow: 0 4px 15px rgba(25, 118, 210, 0.3);
    }
    
    .math-btn:hover {
        background-color: #1565c0;
        box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4);
        transform: translateY(-3px);
        color: white;
    }
    
    .logic-btn {
        background-color: #388e3c;
        box-shadow: 0 4px 15px rgba(56, 142, 60, 0.3);
    }
    
    .logic-btn:hover {
        background-color: #2e7d32;
        box-shadow: 0 6px 20px rgba(56, 142, 60, 0.4);
        transform: translateY(-3px);
        color: white;
    }
    
    .back-to-top {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #42a5f5;
        color: white;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        cursor: pointer;
        display: none;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        font-weight: bold;
        z-index: 100;
        transition: all 0.3s ease;
    }
    
    .back-to-top:hover {
        background-color: #1976d2;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }
</style>
HTML;

// 页面特定脚本
$page_scripts = <<<HTML
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化回到顶部按钮
        const backToTopButton = document.getElementById('backToTop');
        
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                backToTopButton.style.display = 'block';
            } else {
                backToTopButton.style.display = 'none';
            }
        });
        
        backToTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 板块容器悬浮动画效果
        const sectionContainers = document.querySelectorAll('.section-container');
        sectionContainers.forEach(container => {
            container.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-10px)';
                this.style.boxShadow = '0 12px 30px rgba(0, 0, 0, 0.15)';
            });
            
            container.addEventListener('mouseleave', function() {
                this.style.transform = '';
                this.style.boxShadow = '';
            });
        });
        
        // 特性项目悬浮动画效果
        const featureItems = document.querySelectorAll('.feature-item');
        featureItems.forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
                this.style.boxShadow = '0 6px 15px rgba(0,0,0,0.1)';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = '';
                this.style.boxShadow = '';
            });
        });
    });
</script>
HTML;
?>

<!-- 主内容区 -->
<div class="container mt-4">
    <!-- 欢迎区域 -->
    <div class="welcome-container">
        <h1 class="welcome-title">欢迎来到5-6岁专区</h1>
        <p class="welcome-description">这里专为5-6岁的小朋友精心设计，通过数学思维和逻辑推理两大板块，提升孩子的计算能力和解决问题的能力，让思维更加敏捷灵活！</p>
        <img src="<?php echo asset_url('images/welcome-5-6.jpg'); ?>" alt="欢迎图片" class="img-fluid rounded" style="max-height: 300px; margin-bottom: 20px;">
    </div>
    
    <!-- 数学思维板块 -->
    <div class="section-container math-section">
        <h2 class="section-title">数学思维</h2>
        <p class="section-description">通过生动有趣的方式，帮助孩子理解数学概念，培养计算能力和数字感</p>
        <img src="<?php echo asset_url('images/math-thinking.jpg'); ?>" alt="数学思维" class="section-image">
        
        <div class="features-container">
            <div class="feature-item">
                <div class="feature-icon">➕</div>
                <div class="feature-text">基础加减法</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🔢</div>
                <div class="feature-text">数字序列</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">📏</div>
                <div class="feature-text">简单测量</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">⚖️</div>
                <div class="feature-text">重量对比</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🧮</div>
                <div class="feature-text">数学游戏</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🎯</div>
                <div class="feature-text">思维挑战</div>
            </div>
        </div>
        
        <div class="text-center">
            <a href="<?php echo page_url('age-5-6-math'); ?>" class="section-btn math-btn">进入数学板块</a>
        </div>
    </div>
    
    <!-- 逻辑推理板块 -->
    <div class="section-container logic-section">
        <h2 class="section-title">逻辑推理</h2>
        <p class="section-description">培养孩子的观察力、分析能力和解决问题的能力，启发创造性思维</p>
        <img src="<?php echo asset_url('images/logic-thinking.jpg'); ?>" alt="逻辑推理" class="section-image">
        
        <div class="features-container">
            <div class="feature-item">
                <div class="feature-icon">🧩</div>
                <div class="feature-text">拼图挑战</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🔍</div>
                <div class="feature-text">找寻规律</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🔄</div>
                <div class="feature-text">排序组合</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🧠</div>
                <div class="feature-text">迷宫闯关</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">🎭</div>
                <div class="feature-text">同类推理</div>
            </div>
            <div class="feature-item">
                <div class="feature-icon">💡</div>
                <div class="feature-text">创意思考</div>
            </div>
        </div>
        
        <div class="text-center">
            <a href="<?php echo page_url('age-5-6-logic'); ?>" class="section-btn logic-btn">进入逻辑板块</a>
        </div>
    </div>
    
    <!-- 家长指导板块 -->
    <div class="section-container parent-section">
        <h2 class="section-title">家长指导</h2>
        <p class="section-description">如何在家中延续孩子的学习，帮助孩子更好地发展思维能力</p>
        
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-lightbulb"></i> 日常活动中的数学</h5>
                        <p class="card-text">在烹饪、购物等日常活动中融入数学元素，让孩子在生活中学习计数、加减法和简单的测量。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-puzzle"></i> 推荐的桌游</h5>
                        <p class="card-text">一些适合5-6岁孩子的桌游推荐，可以在家中进行，锻炼孩子的逻辑思维和策略规划能力。</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-journal-text"></i> 阅读与思考</h5>
                        <p class="card-text">推荐一些有助于培养逻辑思维的儿童读物，并提供一些阅读后的思考问题和讨论点。</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title"><i class="bi bi-chat-dots"></i> 沟通技巧</h5>
                        <p class="card-text">如何通过提问和讨论来培养孩子的批判性思维，让孩子学会自主思考和解决问题。</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="text-center mt-4">
            <a href="<?php echo page_url('parent-guide'); ?>" class="btn btn-primary px-4 py-2">查看详细指南</a>
        </div>
    </div>
</div>

<!-- 回到顶部按钮 -->
<div class="back-to-top" id="backToTop">↑</div> 